<template>
	<view class="my">
		<view class="my-top">
			<view class="title-my">会员信息</view>
			<view class="content-nav">
				<view class="content-info">
					<image class="image-style" :src="userinfo.avatar"></image>
					<view class="info-name">
						<view>{{phone}}</view>
						<image src="../../static/ewm.svg"
							style="width: 50upx;height: 50upx;position: absolute;top: 50upx;" @click="getewm()"></image>
					</view>
				</view>
				<view style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
					<image src="../../static/grxx.png" style="width: 250upx;height: 60upx;" @click="getInfo()"></image>
				</view>
			</view>
		</view>
		<view class="my-nav">
			<view class="nav-grjl">
				<view class="nav-top">
					<view class="top-left">
						<view class="line-y"></view>
						<view class="top-title">个人奖励</view>
					</view>
					<view class="top-right" @click="getuserjil">
						<view class="yhk">
							<image src="../../static/icon.png" style="width: 35upx;height: 20upx;"></image>
						</view>
						<view class="top-title-right">领取记录<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<view class="nav-bottom">
					<view class="bottom-left">
						<view class="money-title">税前可提奖励</view>
						<view class="bottom-money">+{{Number(userinfo.personal_money).toFixed(2)}}</view>
					</view>
					<u-line color="#F4F6FF" direction="col" length="100" />
					<view class="bottom-right">
						<view class="money-title">待生成奖励</view>
						<view class="bottom-money">+{{Number(userinfo.personal_hlat_money).toFixed(2)}}</view>
					</view>
				</view>
				<view class="btn-bottom" @click="gettq">去提取</view>
			</view>
			<view class="nav-grjl-two">
				<view class="nav-top">
					<view class="top-left">
						<view class="line-y"></view>
						<view class="top-title">推荐奖励</view>
					</view>
					<view class="top-right" @click="getusertg">
						<view class="yhk">
							<image src="../../static/icon.png" style="width: 35upx;height: 20upx;"></image>
						</view>
						<view class="top-title-right">领取记录<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<view class="nav-bottom">
					<view class="bottom-left">
						<view class="money-title">税前可提奖励</view>
						<view class="bottom-money">+{{Number(userinfo.rec_money).toFixed(2)}}</view>
					</view>
					<u-line color="#F4F6FF" direction="col" length="100" />
					<view class="bottom-right">
						<view class="money-title">待生成奖励</view>
						<view class="bottom-money">+{{Number(userinfo.rec_hlat_money).toFixed(2)}}</view>
					</view>
				</view>
				<view class="btn-bottom" @click="gettq">去提取</view>
			</view>
			<view class="nav-back-gg">
				<image src="../../static/banner.png" style="width: 100%;height: 220upx;"></image>
			</view>
		</view>


		<u-popup v-model="show" width="500" height="500" mode="center" :closeable="true" border-radius="10">
			<view style="display: flex;align-items: center;justify-content: center;height: 100%;flex-direction: column;">
				<image :src="url" style="width: 400upx;height: 400upx;"></image>
				<view>推广码</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				phone: '',
				form: {
					name: '',
					intro: '',
				},
				userinfo: {},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					intro: [{
						min: 5,
						message: '简介不能少于5个字',
						trigger: 'change'
					}]
				}
			};
		},
		onShow() {
			this.getUserinfo()
		},
		methods: {
			// 获取二维码
			getewm () {
				this.$request('', '/api/apiminiapp/qrcodeurl', 'POST', {}, {}).then(res => {
					this.url = res.data
					this.show = true
				})
			},
			// 查看个人奖励记录
			getuserjil() {
				console.log('111')
				uni.navigateTo({
					url: '/pages/receiving/index'
				})
			},
			// 查看推广
			getusertg() {
				console.log('111')
				uni.navigateTo({
					url: '/pages/recommend/index'
				})
			},
			gettq() {
				uni.navigateTo({
					url: '/pages/Withdrawal/index'
				})
			},
			geTel(tel) {
			 var reg = /^(\d{3})\d{4}(\d{4})$/;
				return tel.replace(reg, "$1****$2");
			},
			getUserinfo() {
				this.$request('', '/api/apiminiapp/getuserinfo', 'POST', {}, {}).then(res => {
					this.phone = this.geTel(res.data.mobile)
					this.userinfo = res.data
					uni.setStorageSync('userinfo', res.data)
				})
			},
			getInfo() {
				uni.navigateTo({
					url: '/pages/info/index'
				})
			}
		}
	};
</script>

<style lang="less">
	.btn-bottom {
		width: 85%;
		height: 80upx;
		background: #FDA917;
		box-shadow: 1upx 2upx 7upx 0upx rgba(255, 255, 255, 0.66);
		border-radius: 50upx;
		color: #fff;
		line-height: 80upx;
		text-align: center;
		font-size: 35upx;
		position: relative;
		bottom: 0upx;
		margin: 0 auto;
	}

	.nav-top {
		display: flex;
		justify-content: space-between;
		padding-top: 30upx;
		padding-left: 30upx;

		.top-left {
			display: flex;
			align-items: center;

			.line-y {
				width: 8upx;
				height: 30upx;
				background-color: #4768F3;
			}

			.top-title {
				color: #7B7B7B;
				font-weight: bold;
				font-size: 32upx;
				margin-left: 20upx;
			}
		}

		.top-right {
			width: 200upx;
			height: 50upx;
			display: flex;
			align-items: center;
			// justify-content: space-around;
			background: linear-gradient(to left, #434EE7 0%, #4987EE 100%);
			border-bottom-left-radius: 50upx;
			border-top-left-radius: 50upx;

			.yhk {
				margin-left: 20upx;
			}

			.top-title-right {
				color: #fff;
				font-size: 25upx;
				letter-spacing: 2upx;
				margin-left: 10upx;
			}
		}
	}

	.nav-bottom {
		display: flex;
		justify-content: space-around;
		padding: 50upx;
		margin-top: 30upx;

		.bottom-left {
			.money-title {
				text-align: center;
				font-size: 25upx;
				color: #444447;
				font-weight: bold;
			}

			.bottom-money {
				font-size: 50upx;
				font-weight: bold;
				color: #EC1561;
				margin-top: 10upx;
			}
		}

		.bottom-right {
			.money-title {
				text-align: center;
				font-size: 25upx;
				color: #444447;
				font-weight: bold;
			}

			.bottom-money {
				font-size: 50upx;
				font-weight: bold;
				color: #7E7E7E;
				margin-top: 10upx;
			}
		}
	}

	.content-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 45upx;
		padding-left: 40upx;
		padding-right: 40upx;

		.content-info {
			display: flex;
			align-items: center;

			.info-name {
				display: flex;
				flex-direction: column;
				// align-items: center;
				font-size: 35upx;
				color: #fff;
				margin-left: 20upx;
				position: relative;
			}
		}
	}

	.title-my {
		width: 100%;
		text-align: center;
		font-size: 36upx;
		color: #fff;
		padding-top: 30upx;
	}

	.my {
		width: 100%;
		height: 100vh;
		background-color: #eee;

		.my-top {
			width: 100%;
			height: 350upx;
			background-image: url('../../static/top-img.png');
			background-size: 100% 100%;
		}

		.image-style {
			width: 138upx;
			height: 138upx;
			background: #4768F3;
			border: 2px solid #FFFFFF;
			border-radius: 50%;
		}
	}

	.my-nav {
		width: 100%;

		// height: 100%;
		.nav-grjl {
			height: 350upx;
			width: 93%;
			background-color: #fff;
			margin: 0 auto;
			border-radius: 10upx;
			position: relative;
			bottom: 40upx;
			box-shadow: 0px 9px 24px 0px rgba(10, 13, 47, 0.05);
		}

		.nav-grjl-two {
			height: 350upx;
			width: 93%;
			background-color: #fff;
			margin: 0 auto;
			border-radius: 10upx;
			position: relative;
			margin-top: 60upx;
			box-shadow: 0px 9px 24px 0px rgba(10, 13, 47, 0.05);
			// bottom: 40upx;
		}

		.nav-back-gg {
			width: 95%;
			margin: 0 auto;
			margin-top: 80upx;
		}
	}
</style>
